<template>
  <view class="flex flex-col justify-center items-center" @click.stop="emit('click')">
    <wd-icon :name="name" :size="size" :color="color"></wd-icon>
    <text class="mt-[4rpx]" :class="textClass">{{ text }}</text>
  </view>
</template>
<script setup lang="ts">
const emit = defineEmits(['click'])

const props = defineProps({
  name: {
    type: String,
    default: 'star',
  },
  size: {
    type: String,
    default: '32rpx',
  },
  color: {
    type: String,
    default: 'inherit',
  },
  text: {
    type: String,
    default: '收藏',
  },
  textClass: {
    type: String,
    default: 'text-[#9A9A9A] text-[18rpx]',
  },
})
</script>
<script lang="ts">
export default {
  options: {
    virtualHost: true,
    name: 'KIconBox',
  },
}
</script>
<style lang="scss" scoped></style>
